<template>
    <div class="patient-detail settle-sub-box">
        <div class="fill-in">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="1.5rem" :show-message="false"
                     :label-position="'top'" class="form clearfix">
                <el-form-item label="姓名" prop="name">
                    <el-input placeholder="请输入姓名" v-model="ruleForm.name" @blur="$method.inputBlur()"></el-input>
                </el-form-item>
                <el-form-item label="身份证号" prop="cardId">
                    <el-input placeholder="请输入身份证号" v-model="ruleForm.cardId" @blur="$method.inputBlur()">
                        <el-button slot="append" icon="el-icon-camera-solid"
                                   @click="chooseImage()"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item label="手机号码（患者或家属手机号码）" prop="phone">
                    <el-input placeholder="请输入手机号码" v-model="ruleForm.phone" type="number"
                              @blur="$method.inputBlur()"></el-input>
                </el-form-item>
            </el-form>
            <el-button-group class="submit">
                <el-button class="primary" @click="saveInfo">保存</el-button>
                <el-button class="remove" @click="removeInfo" v-if="id">删除就诊人</el-button>
            </el-button-group>
            <form name="imgForm" style="display:none;"></form>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            let phoneRule = /^1\d{10}$/,
                validatePhone = (rule, value, callback) => {
                    if (value && !phoneRule.test(value)) {
                        callback(new Error('手机号格式错误'))
                    } else {
                        callback()
                    }
                }
            return {
                ruleForm: {
                    name: '',
                    cardId: '',
                    phone: ''
                },
                rules: {
                    name: [
                        {required: true, message: '请填写姓名', trigger: 'blur'}
                    ],
                    cardId: [
                        {required: true, message: '请填写身份证号', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '请填写手机号码', trigger: 'blur'},
                        {validator: validatePhone, trigger: 'blur'}
                    ]
                },
                id: ''
            }
        },
        mounted() {
            this.$method.wxConfig()
            if (this.$route.params.idNumber) this.ruleForm.cardId = this.$route.params.idNumber
            if (this.$route.params.name) this.ruleForm.name = this.$route.params.name
            if (this.$route.query.id) {
                this.id = this.$route.query.id
                this.getDetail()
            }
        },
        methods: {
            getDetail() {
                this.$http.get('/userPatient/get', {
                    id: this.id
                }).then(result => {
                    if (result.success) {
                        this.ruleForm = {...this.ruleForm, ...result.data}
                    }
                })
            },
            // 微信图片上传
            chooseImage(type) {
                let _this = this

                this.$wechat.chooseImage({
                    count: 1, // 默认9
                    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success: function (res) {
                        _this.getLocalImgData(res.localIds[0], type)
                        _this.$vux.loading.show()
                    }
                })
            },
            getLocalImgData(localId, type) {
                let _this = this
                this.$wechat.getLocalImgData({
                    localId: localId, // 图片的本地ID
                    success: (res) => {
                        var localData = res.localData // localData是图片的base64数据，可以用img标签显示
                        if (localData.indexOf('data:image') !== 0) {
                            localData = 'data:image/jpg;base64,' + localData
                        }
                        let form = document.imgForm,
                            formData = new FormData(form),
                            fileName = new Date().getTime() + '.jpg'
                        formData.append('file', _this.$filter.dataURLtoFile(localData, fileName))
                        _this.fileUpload(formData, type)
                    },
                    fail: function () {
                        _this.$vux.loading.hide()
                    }
                })
            },
            fileUpload(formData, type) {
                this.$vux.loading.show()
                this.$nextTick(() => {
                    this.$http.post('/file/upload?type=idcard',
                        formData,
                        {headers: {'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundaryU9T56J8eIqTBGRQH'}}
                    ).then(result => {
                        if (result.success) {
                            this.parseIdCard(result.data.uuid)
                        } else {
                            this.$vux.loading.hide()
                        }
                    }).catch(() => {
                        this.$vux.loading.hide()
                    })
                })
            },
            // 身份证上传相关
            parseIdCard(id) {
                this.$vux.loading.show()
                this.$http.get('/healthcode/parseIdCard?fileId=' + id).then(result => {
                    if (result.success) {
                        let message = result.data.response[0]
                        if (message.idnumber) this.ruleForm.cardId = message.idnumber
                        if (message.name) this.ruleForm.name = message.name
                    }
                    this.$vux.loading.hide()
                }).catch(() => {
                    this.$vux.loading.hide()
                })
            },

            // 保存信息
            saveInfo() {
                let _this = this
                this.validate('ruleForm', () => {
                    let url = '/userPatient/save'
                    if (this.id) url = '/userPatient/update'
                    this.$http.post(url, {
                        cardId: this.ruleForm.cardId.trim(),
                        name: this.ruleForm.name.trim(),
                        phone: this.ruleForm.phone,
                        userPatientId: this.id
                    }).then(result => {
                        if (result.success) {
                            this.$vux.toast.text(this.id ? '修改就诊人信息成功' : '新增就诊人成功', 'middle')
                            _this.$emit('updateInfo')
                            history.back()
                            _this.$refs.ruleForm.resetFields()
                        }
                    })
                })
            },
            validate(formName, callback) {
                this.$refs[formName].validate((valid, obj) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        this.$vux.toast.text(obj[Object.keys(obj)[0]][0].message, 'middle')
                        return false
                    }
                })
            },
            removeInfo() {
                let _this = this
                this.$vux.confirm.show({
                    content: '是否确认删除',
                    onConfirm() {
                        _this.$http.post('/userPatient/delete', {
                            userPatientId: _this.id
                        }).then(result => {
                            if (result.success) {
                                _this.$vux.toast.text('删除就诊人成功', 'middle')
                                _this.$emit('updateInfo')
                                history.back()
                                _this.$refs.ruleForm.resetFields()
                            }
                        })
                    }
                })
            }
        },
        components: {}
    }
</script>

<style scoped lang="less">
    .patient-detail {
        background-color: #f4f4f4;

        .form {
            /deep/ .el-form-item {
                font-size: .28rem;
                /*border-bottom: 1px solid #ddd;*/
                background-color: #fff;
                margin-bottom: .15rem;
                padding: .1rem 0;

                .el-form-item__label {
                    color: #333;
                    padding: 0 0 0 .2rem;
                    font-size: .28rem;
                    line-height: .48rem;

                }

                &.custom-label {
                    padding: .1rem .2rem;

                    .el-form-item__label {
                        padding-left: 0;
                        width: 100%;

                        .is-required {
                            &:before {
                                content: '*';
                                color: #F56C6C;
                                margin-right: 4px;
                            }
                        }
                    }
                }

                .expertApply {
                    margin: .08rem 0;
                    line-height: .44rem;
                }

                .el-form-item__content {
                    position: relative;
                    font-size: .28rem;
                    line-height: .5rem;
                }

                .el-radio-group {
                    padding: 0 .2rem;
                    width: 100%;

                    .el-radio {
                        width: 100%;
                        font-size: .28rem;
                        line-height: .48rem;
                        white-space: normal;
                        margin-right: 0;
                        margin-bottom: .1rem;
                    }
                }

                .selector {
                    padding: .1rem .2rem;
                    line-height: .48rem;

                    .weui-select {
                        padding-left: 0;
                        height: .48rem;
                        line-height: .48rem;
                        font-size: .28rem;
                    }
                }

                .weui-cells_checkbox {
                    .weui-icon-checked {
                        &:before {
                            font-size: .34rem;
                        }
                    }

                    .weui-check:checked + .vux-checklist-icon-checked {
                        &:before {
                            color: #409EFF;
                        }
                    }
                }

                .el-input {
                    font-size: .28rem;

                    input {
                        padding: 0 .2rem;
                        border: 0 none;
                        height: .68rem;
                        line-height: .68rem;
                        border-radius: 2px;
                        /*border-color: rgba(255, 184, 203);*/
                    }

                    .el-input-group__append {
                        border: 0 none;
                        background-color: transparent;
                        padding: 0 .2rem;

                        .el-button {
                            i {
                                font-size: .48rem;
                            }
                        }
                    }
                }

                .el-button {
                    font-size: .28rem;
                }

                .form-group {
                    .weui-cells {
                        &:before, &:after {
                            border: 0 none;
                        }

                        margin-top: 0;
                        font-size: .28rem;

                        .weui-cell {
                            padding: .15rem .2rem;

                            &:before {
                                border: 0 none;
                            }
                        }

                        .vux-cell-value {
                            color: inherit;
                        }
                    }
                }

                &.form-item-top {
                    margin-top: -.2rem;
                    border-top: 1px solid #eee;
                }

                &.is-error {
                    input {
                        /*background-color: rgba(255, 184, 203, .3);*/
                        /*border: 1px solid rgba(255, 184, 203);*/
                    }
                }
            }
        }

        .submit {
            width: 100%;

            .el-button {
                width: 90%;
                margin: 0 auto;
                margin-top: .3rem;
                display: block;
                float: none;
                height: .88rem;
                line-height: .88rem;
                padding: 0;
                border-radius: 3px;
                text-align: center;
            }

            .primary {
                color: #fff;
                background-color: #6D97FF;
                border: 1px solid #6D97FF;
            }

            .remove {
                color: #FF2626;
                border: 1px solid #FF2626;
                background-color: #fff;
            }
        }
    }
</style>
